From de2e9f5c6e4cf2ea18bc460df433867c6df3bf7f Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 21 Feb 2024 22:29:25 -0800
Subject: styles

---
 .../(app)/[username]/(profile)/+layout.svelte      | 217 +++++++++++----------
 src/routes/(app)/[username]/(profile)/+page.svelte |  15 +-
 .../(app)/[username]/invoice/[id]/+page.svelte     |   8 +-
 3 files changed, 126 insertions(+), 114 deletions(-)

(limited to 'src/routes/(app)/[username]')

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 19c40546..9507441f 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -77,67 +77,13 @@
 
 <div class="container mx-auto w-full px-4 flex flex-wrap lg:flex-nowrap">
   <div class="hidden lg:block lg:w-[300px]" />
-  <div class="lg:w-[300px] lg:absolute space-y-5 left-20 mx-auto max-w-sm">
+  <div class="lg:w-[300px] lg:absolute space-y-5 left-20 mx-auto max-w-sm mb-5">
     <div
       class="flex text-3xl font-bold text-center mx-auto justify-center gap-2"
     >
       <div class="my-auto break-words w-full">{display || username}</div>
-      <button on:click={toggleDetails}>
-        <Icon icon="stats" style="w-12 min-w-[50px]" />
-      </button>
     </div>
 
-    {#if showDetails}
-      <div>
-        <div class="font-bold">{$t("user.profilePage")}</div>
-        <div class="flex gap-4">
-          <div class="break-all grow text-secondary text-lg">
-            {profile}
-          </div>
-          <div class="flex mb-auto gap-1">
-            <button class="my-auto" on:click={() => copy(profile)}
-              ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button
-            >
-            <a href={`/qr/${encodeURIComponent(profile)}`} class="my-auto">
-              <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
-            </a>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div class="font-bold">{$t("user.lightningAddress")}</div>
-        <div class="flex gap-4">
-          <div class="break-all grow text-secondary text-lg">
-            {lnaddr}
-          </div>
-          <div class="flex mb-auto gap-1">
-            <button class="my-auto" on:click={() => copy(lnaddr)}
-              ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button
-            >
-            <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto">
-              <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
-            </a>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div class="font-bold">{$t("user.nostrPubkey")}</div>
-        <div class="flex gap-4">
-          <div class="break-all grow text-secondary text-lg">
-            {npub}
-          </div>
-          <div class="flex my-auto gap-1">
-            <button class="my-auto" on:click={() => copy(npub)}
-              ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button
-            >
-            <a href={`/qr/${encodeURIComponent(npub)}`} class="my-auto">
-              <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
-            </a>
-          </div>
-        </div>
-      </div>
-    {/if}
-
     {#if subject.address && subject.id !== user?.id}
       <div
         class="text-secondary mx-auto text-center lg:text-left lg:mx-0"
@@ -160,76 +106,81 @@
       >
     </div>
 
-    <div class="flex flex-wrap gap-2 w-full">
+    <div class="flex flex-wrap gap-2 w-full text-xl">
       {#if user && user.username !== subject.username && subject.pubkey}
         {#if following}
-          <div class="w-full flex">
-            <button
-              class="mx-auto rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60 bg-black text-white"
-              on:click={unfollow}
-            >
-              <div class="mx-auto flex">
-                <Icon icon={"profile"} style="my-auto h-6 mr-2 invert" />
-                <div class="my-auto">{$t("user.following")}</div>
-              </div>
-            </button>
-          </div>
+          <button
+            class="mx-auto rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white grow"
+            on:click={unfollow}
+          >
+            <div class="mx-auto flex">
+              <Icon icon={"profile"} style="my-auto w-8 mr-2 invert" />
+              <div class="my-auto">{$t("user.following")}</div>
+            </div>
+          </button>
         {:else}
-          <div class="w-full flex">
-            <button
-              class="mx-auto rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
-              on:click={follow}
-            >
-              <div class="mx-auto flex">
-                <Icon icon={"profile"} style="my-auto h-6 mr-2" />
-                <div class="my-auto">{$t("user.follow")}</div>
-              </div>
-            </button>
-          </div>
+          <button
+            class="mx-auto rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex grow"
+            on:click={follow}
+          >
+            <div class="mx-auto flex">
+              <Icon icon={"profile"} style="my-auto h-6 mr-2" />
+              <div class="my-auto">{$t("user.follow")}</div>
+            </div>
+          </button>
         {/if}
       {/if}
 
       {#if user && user.username !== subject.username && subject.pubkey}
-        <div class="w-full flex">
-            <a href={`/${user.username}/messages/${subject.username}`} class="mx-auto">
-            <button
-              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
-            >
-              <div class="mx-auto flex">
-                <Icon icon="message" style="mr-2 my-auto" />
-                <div class="mt-1 my-auto">{$t("user.message")}</div>
-              </div>
-            </button>
-          </a>
-        </div>
+        <a
+          href={`/${user.username}/messages/${subject.username}`}
+          class="contents"
+        >
+          <button
+            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow"
+          >
+            <div class="mx-auto flex">
+              <Icon icon="message" style="w-8 mr-2 my-auto" />
+              <div class="mt-1 my-auto">{$t("user.message")}</div>
+            </div>
+          </button>
+        </a>
       {/if}
 
       {#if !subject.anon && subject.username !== user?.username}
-        <div class="w-full flex">
-          <a
-            href={user
-              ? `/send/${subject.username}`
-              : `/${subject.username}/receive`}
-            class="mx-auto"
+        <a
+          href={user
+            ? `/send/${subject.username}`
+            : `/${subject.username}/receive`}
+          class="contents"
+        >
+          <button
+            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow"
           >
-            <button
-              class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
-            >
-              <div class="mx-auto flex">
-                <Icon icon="send" style="mr-2" />
-                <div class="mt-1">{$t("user.pay")}</div>
-              </div>
-            </button>
-          </a>
-        </div>
+            <div class="mx-auto flex">
+              <Icon icon="send" style="w-8 mr-2" />
+              <div class="mt-1">{$t("user.pay")}</div>
+            </div>
+          </button>
+        </a>
       {/if}
+      <button
+        type="button"
+        on:click={toggleDetails}
+        class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60 grow"
+      >
+        <div class="mx-auto flex">
+          <Icon icon="edit" style="w-8 mr-2" />
+          <div class="mt-1">{$t("user.details")}</div>
+        </div>
+      </button>
 
       {#if user?.admin && user.username !== subject.username}
         <form class="w-full flex" on:submit|preventDefault={reset}>
           <input placeholder="Password reset" bind:value={password} />
           <button
             type="submit"
-            class="rounded-full border py-3 px-6 font-bold hover:opacity-80 flex w-60"
+            class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex w-60"
           >
             <div class="mx-auto flex">
               <Icon icon="clock" style="mr-2 my-auto w-8" />
@@ -239,6 +190,58 @@
         </form>
       {/if}
     </div>
+    {#if showDetails}
+      <div class="text-xl space-y-5">
+        <div>
+          <div class="font-bold">{$t("user.profilePage")}</div>
+          <div class="flex gap-4">
+            <div class="break-all grow text-secondary">
+              {profile}
+            </div>
+            <div class="flex mb-auto gap-1">
+              <button class="my-auto" on:click={() => copy(profile)}
+                ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button
+              >
+              <a href={`/qr/${encodeURIComponent(profile)}`} class="my-auto">
+                <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="font-bold">{$t("user.lightningAddress")}</div>
+          <div class="flex gap-4">
+            <div class="break-all grow text-secondary">
+              {lnaddr}
+            </div>
+            <div class="flex mb-auto gap-1">
+              <button class="my-auto" on:click={() => copy(lnaddr)}
+                ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button
+              >
+              <a href={`/qr/${encodeURIComponent(lnaddr)}`} class="my-auto">
+                <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+              </a>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="font-bold">{$t("user.nostrPubkey")}</div>
+          <div class="flex gap-4">
+            <div class="break-all grow text-secondary">
+              {npub}
+            </div>
+            <div class="flex my-auto gap-1">
+              <button class="my-auto" on:click={() => copy(npub)}
+                ><Icon icon="copy" style="max-w-max w-8 min-w-[32px]" /></button
+              >
+              <a href={`/qr/${encodeURIComponent(npub)}`} class="my-auto">
+                <Icon icon="qr" style="invert max-w-max min-w-[32px]" />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    {/if}
   </div>
 
   <div class="w-full">
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 3ead0171..b3d9f842 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -174,13 +174,13 @@
         </div>
         <div class="bg-white rounded-xl py-2">
           <div class="flex text-left gap-2">
-            <div class="overflow-hidden">
+            <div class="overflow-hidden space-y-1">
               <div class="text-2xl break-words">{i.name}</div>
               <div class="flex gap-2">
-                <div class="font-semibold">
+                <div class="font-semibold text-lg">
                   {f(i.price, currency)}
                 </div>
-                <div class="text-secondary">
+                <div class="text-secondary my-auto">
                   {sat(btc(i.price, rate))}
                 </div>
               </div>
@@ -198,6 +198,15 @@
               <div class="text-2xl my-auto text-center">
                 {#if i.quantity}{i.quantity}{:else}&mdash;{/if}
               </div>
+              {#if i.quantity}
+                <button
+                  type="button"
+                  on:click|stopPropagation={() =>
+                    i.quantity++}
+                >
+                  <Icon icon="plus" style="w-10 min-w-10" />
+                </button>
+              {/if}
             </div>
           </div>
         </div>
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index 3451cf58..c539125b 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -186,7 +186,7 @@
 
   <button
     type="button"
-    class="flex gap-2 text-center break-all text-lg rounded-2xl hover:opacity-80 p-4 w-full mx-auto justify-center border bg-black text-white text-xl"
+    class="flex gap-2 text-center break-all rounded-2xl hover:opacity-80 py-5 px-6 w-full mx-auto justify-center border bg-black text-white text-2xl"
     on:click={() => copy(txt)}
   >
     <Icon icon="copy" style="w-8 my-auto invert" />
@@ -195,10 +195,10 @@
     </div>
   </button>
 
-  <div class="w-full flex justify-center gap-2 flex-wrap text-secondary">
+  <div class="w-full flex justify-center gap-2 flex-wrap text-secondary text-xl">
     <a href={link} class="w-full">
       <button
-        class="w-full flex justify-center rounded-2xl border py-3 px-5 hover:opacity-80 text-lg"
+        class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
       >
         <Icon icon="mobile" style="mr-1 w-8" />
         <div class="my-auto">{$t("payments.openLink")}</div>
@@ -206,7 +206,7 @@
     </a>
 
     <button
-      class="w-full flex justify-center rounded-2xl border py-3 px-5 hover:opacity-80 text-lg"
+      class="w-full flex justify-center rounded-2xl border py-5 px-6 hover:opacity-80"
       on:click={() => ($showQr = $showQr ? false : 2)}
     >
       <Icon icon="qr" style="w-8 mr-1 invert my-auto" />
-- 
cgit v1.2.3